<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="include :: header('新增用户')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" lay-filter="userFilter">

            <div class="layui-form-item">
                <label for="loginName" class="layui-form-label">
                    <span class="x-red">*</span>登录账号
                </label>
                <div class="layui-input-block">
                    <input type="text" id="loginName" name="loginName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>将会成为您唯一的登录信息
                </div>
            </div>

            <div class="layui-form-item">
                <label for="userName" class="layui-form-label">
                    <span class="x-red">*</span>用户昵称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="userName" name="userName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>给自己一个不一样的称呼
                </div>
            </div>


            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>手机
                </label>
                <div class="layui-input-block">
                    <input type="text" id="phone" name="phone" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>正确有效的联系方式
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>邮箱
                </label>
                <div class="layui-input-block">
                    <input type="text" id="L_email" name="email" required="" lay-verify="email"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>正确有效的邮箱地址
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>角色</label>
                <div class="layui-input-block">
                    <input th:each="sysRole:${sysRolesInfo}" name="role" type="checkbox" th:value="${sysRole.roleId}"
                           lay-skin="primary"
                           th:title="${sysRole.roleName}">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_post" class="layui-form-label">
                    <span class="x-red">*</span>岗位
                </label>
                <div class="layui-input-block">
                    <ul id="L_post" class="dtree" data-id="0" lay-verify="postVerify"></ul>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_dept" class="layui-form-label">
                    <span class="x-red">*</span>部门
                </label>
                <div class="layui-input-block">
                    <input type="text" id="L_dept" name="deptName" required="" lay-verify="deptName"
                           autocomplete="off" class="layui-input" placeholder="单击选择部门">
                    <input type="text" hidden="true" id="deptId" name="deptid">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>密码
                </label>
                <div class="layui-input-block">
                    <input type="password" id="L_pass" name="pass" required="" lay-verify="pass"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    6到16个字符
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码
                </label>
                <div class="layui-input-block">
                    <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button type="button" class="layui-btn" lay-filter="add" lay-submit="">
                    增加
                </button>
            </div>

        </form>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<script>
    layui.extend({
        dtree: ctx + 'lib/layui_ext/dist/dtree',
    }).use(['form', 'layer', 'dtree'],
        function () {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var dtree = layui.dtree;

            //岗位下拉树
            var postTree = dtree.renderSelect({
                elem: '#L_post',
                // width: '100%',
                url: ctx + 'system/post/postdtree',
                // method: 'POST',
                checkbar: true, // 设置复选框
                checkbarType: "self",
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                dataFormat: "list",  //配置data的风格为list
                response: {
                    message: "msg",
                    statusCode: 0,
                    statusName: 'code',
                    rootName: 'data',
                    treeId: "id", //节点ID（必填）
                    parentId: "parentId", //父节点ID（必填）
                    title: "title", //节点名称（必填）
                    // checkArr: "checkArr", //复选框列表（开启复选框必填，默认是json数组。）
                },  //修改response中返回数据的定义
                success: function (data, ul, first) {
                    // console.log(data);
                }
            });

            var postId;

            dtree.on('node("L_post")', function (obj) {
                var param = dtree.selectVal("L_post");
                // layer.msg(JSON.stringify(param));
                postId = param.L_post_select_nodeId;
            });

            //部门树 下拉
            $('#L_dept').click(function () {
                var deptTree = null;
                layer.open({
                    type: 1,
                    title: '部门树',
                    area: ["500px", "80%"],
                    content: '<ul id="DeptTree" class="dtree" data-id="0"></ul>',
                    success: function (layero, index) {

                        deptTree = dtree.render({
                            elem: '#DeptTree',
                            url: ctx + 'system/dept/detpDtree',
                            method: 'POST',
                            dataStyle: "layuiStyle",  //使用layui风格的数据格式
                            dataFormat: "list",  //配置data的风格为list
                            icon: ["0", "5"],
                            response: {
                                statusName: "code", //返回标识（必填）
                                statusCode: 0, //返回码（必填）
                                message: "msg", //返回信息（必填）
                                rootName: "data", //根节点名称（必填）
                                treeId: "id", //节点ID（必填）
                                parentId: "parentId", //父节点ID（必填）
                                title: "title", //节点名称（必填）
                            },
                            success: function (data, ul, first) {
                                // console.log(data);
                            },

                        });

                        // 绑定节点的双击
                        dtree.on("nodedblclick('DeptTree')", function (obj) {
                            $("#L_dept").val(obj.param.context);
                            $("#deptId").val(obj.param.nodeId);
                            layer.close(index);
                        });
                    },

                    yes: function (_index, _layero) {
                        var param = dtree.getNowParam("DeptTree"); // 获取当前选中节点

                        $("#deptId").val(param.nodeId);
                        $("#L_dept").val(param.context);
                        layer.close(index);
                    }
                });
            });

            //自定义验证规则
            form.verify({

                userName: function (value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符';
                    }
                },
                postVerify: function (value) {
                    var param = dtree.selectVal("L_post");
                    var _selectPstId = param.L_post_select_nodeId;
                    if (_selectPstId == null || _selectPstId =="" || _selectPstId==undefined ) {
                        return '岗位信息必选'
                    }
                },
                deptName : function(value){
                    if (value.length < 1) {
                        return '部门信息必选';
                    }
                },
                pass: [/(.+){6,12}$/, '密码必须6到12位'],
                repass: function (value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                }
            });

            //监听提交
            form.on('submit(add)', function (data) {

                // 获取角色信息
                var _roleIds = "";
                $('input:checkbox[name="role"]:checked').each(function (index, element) {
                    if (index == 0) {
                        _roleIds = $(this).val();
                    } else {
                        _roleIds += "," + $(this).val();
                    }
                });

                var _postParam = postTree.getCheckbarNodesParam("#L_post");
                var postParamArr = _postParam.map((item, index) => {
                    return item.nodeId
                }).join();

                $.ajax({
                    url: ctx + 'system/user/adduser',
                    type: 'POST',
                    data: {
                        loginName: $('#loginName').val(),
                        userName: $('#userName').val(),
                        email: $('#L_email').val(),
                        phonenumber: $('#phone').val(),
                        password: $('#L_repass').val(),
                        deptId: $('#deptId').val(),
                        postIds: postParamArr,
                        roleIds: _roleIds,
                    },
                    success: function (_data) {
                        if (_data.code === 0) {
                            //关闭当前frame
                            layer.msg("新增成功");
                            //表格刷新
                            parent.layui.table.reload("userlist");

                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        } else {
                            layer.msg(_data.msg);
                        }
                    }
                });
                return false;
            });

        });
</script>
</body>

</html>
